<template>
    <div class="box">
        <div class="header_box">
            <HeaderView>
                <template v-slot:center>
                    <div class="header_box_main"  @click="toCustomerReply">
                        <van-tabs type="card">
                            <van-tab title="顾客评价"></van-tab>
                            <van-tab title="我的评价"></van-tab>
                        </van-tabs>
                    </div>
                </template>
                <template v-slot:right>
                    <div @click="selectDate">
                        <van-icon name="calendar-o"/>
                    </div>
                </template>
            </HeaderView>
        </div>

        <div class="main">
            <div class="item" v-for="item in myReply" :key="item.num">
                <ul>
                    <li>
                        <span>订单编号:</span>
                        <span>{{item.num}}</span>
                        <span class="sp1" @click="toMyReplyDetail">详情></span>
                    </li>
                    <li>
                        <span>配送评分:</span>
                        <span>
                            <van-rate v-model="item.pinfen" />
                        </span>
                    </li>
                    <li>
                        <span>配送员:</span>
                        <span>{{item.dispatcher}}</span>
                    </li>
                    <li>
                        <span>评价内容：</span>
                        <span>{{item.text}}</span>
                        <span>
                            <van-tag color="red" plain>审核中</van-tag>
                        </span>
                    </li>
                    <li>
                        <span>评价时间</span>
                        <span>{{item.replyTime}}</span>
                    </li>
                </ul>
            </div>

            <p class="bottom">--没有更多数据了--</p>
        </div>
    </div>
</template>
<script>
    import HeaderView from '@/components/header1View.vue';
    export default{
        data(){
            return{
                myReply:[
                    {
                        num:12232964103521,  //订单编号
                        pinfen:3,  
                        dispatcher:'张三',
                        text:'服务好，配送快，速度一流',
                        replyTime:'2021-12-03 17:16:17'
                    },
                    {
                        num:12232964103521,
                        pinfen:1,
                        dispatcher:'张三',
                        text:'服务好，配送快，速度一流',
                        replyTime:'2021-12-03 17:16:17'
                    },
                    {
                        num:12232964103521,
                        pinfen:5,
                        dispatcher:'张三',
                        text:'服务好，配送快，速度一流',
                        replyTime:'2021-12-03 17:16:17'
                    }
                ]
            }
        },
        methods:{
            toCustomerReply(){
                this.$router.push('./CustomerReply')
            },
            selectDate(){
                this.$router.push('./SelectDate')
            },
            toMyReplyDetail(){
                this.$router.push('./MyReplyDetail')
            }
        },
        components:{
            HeaderView
        }
    }
</script>
<style scoped>
    /* *{
        border: 1px solid red;
    } */
     .header_box_main{
        width: 200px;
        text-align: center;
        margin:0 auto;
    }
    .main{
        width: 100%;
        background: #f5f5f5;
    }
    ::v-deep .van-icon-calendar-o:before {
    content: '\e67e';
    font-size:25px;
    margin-right:10px;
    }
    .item{
        background: white;
        width: 90%;
        margin: 10px auto;
        font-size: 16px;
        padding: 10px;
    }
    .sp1{
        float: right;
    }
    li{
        margin-top: 10px;
    }
    .bottom{
        font-size: 16px;
        text-align: center;
    }
</style>
